<template>
  <div v-show="visible" class="graph-dialog">
    <div class="graph-dialog__content">
      <!-- 弹窗关闭按钮 -->
      <div class="graph-dialog__close" @click="handleClose">
        <i class="el-icon-close"></i>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClose() {
      this.$emit('onClose')
    }
  }
}
</script>

<style lang="scss" scoped>
.graph-dialog {
  position: fixed;
  top: 75px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 100;
  &__content {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
  }
  &__close {
    position: absolute;
    width: 140px;
    height: 140px;
    right: -70px;
    top: -70px;
    padding-top: 82px;
    padding-right: 70px;
    padding-left: 23px;
    border-radius: 50%;
    background-color: #efefef;
    cursor: pointer;
    z-index: 101;
    &>.el-icon-close {
      font-size: 38px;
      line-height: 1;
      color: #999;
    }
    &:hover {
      &>.el-icon-close {
        color: #ff4a3b;
      }
    }
  }
}
</style>
